<template>
	<view class="content">
		<view class="cu-modal bottom-modal" :class="[{ show: showModal }, modalType]" cathctouchmove @tap="hideModal">
			<view class="cu-dialog" @tap.stop style="background: none; overflow: visible;">
				<view class="share-box">
					<view class="share-list-box x-f">
						<!-- #ifdef MP-WEIXIN -->
						<button class="share-item share-btn y-f" open-type="share">
							<image class="share-img" :src="$IMG_URL + '/share_wx.png'" mode=""></image>
							<text class="share-title">微信好友</text>
						</button>
						<!-- #endif -->
						<view class="share-item y-f" @tap="toPoster">
							<image class="share-img" :src="$IMG_URL + '/share_poster.png'" mode=""></image>
							<text class="share-title">分享海报</text>
						</view>
					</view>
					<view class="share-foot x-c" @tap="hideModal">取消</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
/**
 * 分享弹窗
 * @property {Boolean} value = showModal - v-model控制显隐
 * @property {String} modalType - 模态框类别
 * @property {String} posterType - 海报类别
 * @property {Object} id - 商品id、id。
 */
export default {
	components: {},
	data() {
		return {};
	},
	props: {
		value: {},
		modalType: {
			type: String,
			default: ''
		},
		posterType: '', //海报类别
		shareData: {} //基础信息
	},
	computed: {
		showModal: {
			get() {
				this.value ? uni.hideTabBar() : uni.showTabBar();
				return this.value;
			},
			set(val) {
				this.$emit('input', val);
			}
		}
	},
	watch: {},
	created() {
		//shareInfo为mixin混入
		let that = this;
		switch (this.posterType) {
			case 'groupon':
				that.shareInfo = that.shareData.goods;
				that.shareInfo.id = that.shareData.id;
				that.shareInfo.num = that.shareData.num;
				break;
			case 'store':
				that.shareInfo.id = that.shareData.id;
				that.shareInfo.image = that.shareData.image_first;
				that.shareInfo.title = that.shareData.name;
				break;
			default:
				that.shareInfo = that.shareData;
				that.shareInfo.image = that.shareData.image;
		}
		this.setShare();
	},
	methods: {
		// 设置分享信息
		setShare() {
			let that = this;
			that.setShareInfo({
				title: that.shareInfo.title,
				image: that.shareInfo.image,
				query: {
					url: this.posterType + '-' + this.shareInfo.id
				}
			});
			if (this.shareInfo) {
				let timer = setTimeout(function() {
					that.$emit('setShareInfo', that.shareInfo);
				}, 100);
			}
		},
		// 跳转
		toPoster() {
			let that = this;
			this.hideModal();
			if (that.posterType === 'store') {
				this.$Router.push({
					path: '/pages/public/poster/index',
					query: {
						id: that.shareInfo.id,
						posterType: that.posterType
					}
				});
			} else {
				this.$Router.push({
					path: '/pages/public/poster/index',
					query: {
						id: that.shareInfo.id,
						image: that.shareInfo.image,
						title: that.shareInfo.title,
						price: that.posterType === 'groupon' ? that.shareInfo.groupon_price : that.shareInfo.price,
						original_price: that.shareInfo.original_price,
						teamNum: that.posterType === 'groupon' ? that.shareInfo.num : 0,
						posterType: that.posterType
					}
				});
			}
		},
		hideModal() {
			this.showModal = false;
			if (this.posterType === 'store') {
				this.setShareInfo({
					title: '', //自定义分享标题
					image: '', //自定义分享图片
					query: {} //自定义分享参数
				});
				let timer = setTimeout(() => {
					this.$emit('setShareInfo', this.shareInfo);
				}, 100);
			}
			uni.showTabBar();
		}
	}
};
</script>

<style lang="scss">
.share-box {
	background: #fff;
	width: 750rpx;
	border-radius: 30rpx 30rpx 0 0;
	padding-top: 30rpx;
	position: relative;

	.share-foot {
		font-size: 24rpx;
		color: #bfbfbf;
		height: 80rpx;
		border-top: 1rpx solid #eee;
	}

	.share-list-box {
		.share-btn {
			background: none;
			border: none;
			line-height: 1;
			padding: 0;
			&::after {
				border: none;
			}
		}
		.share-item {
			flex: 1;
			padding-bottom: 20rpx;

			.share-img {
				width: 70rpx;
				height: 70rpx;
				background: rgba(246, 246, 254, 1);
				border-radius: 50%;
				margin-bottom: 20rpx;
			}

			.share-title {
				font-size: 24rpx;
				color: #666;
			}
		}
	}
}
</style>
